@@include('../partials/_template-top.html', {
'bodyClass': 'home-one-bg'
})

@@include('../partials/_header.html')
<div id="scrollSmoother-container">
    @@include('../partials/_breadcrumb.html', {
    'breadcrumbText': 'Checkout',
    'breadcrumbTitle': 'CHECKOUT'
    })

    <section class="checkout-area py-120 position-relative overflow-hidden z-1">
        <div class="container">
            <div class="notice mb-60">
                <span class="notice-icon">
                    <img src="assets/images/icons/notice-icon.svg" alt="">
                </span>
                <p class="notice-text">Have a coupon?</p>
                <a href="javascript:void(0);" class="notice-btn">Click here to enter your code</a>
            </div>
            <div class="row g-4">
                <div class="col-lg-6">
                    <form action="#" class="checkout-form">
                        <h4 class="checkout-form-title">Billing Details</h4>
                        <div class="checkout-form-wrapper mb-40">
                            <div class="row">
                                <div class="col-xl-6">
                                    <div class="position-relative tw-mb-4">
                                        <input type="text" class="form-input" placeholder="First Name" required>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="position-relative tw-mb-4">
                                        <input type="text" class="form-input" placeholder="Last Name" required>
                                    </div>
                                </div>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="email" class="form-input" placeholder="Email Address" required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="Company name (optional)" required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="House number and street name"
                                    required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="Town/City" required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="State" required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="Postcode" required>
                            </div>

                            <div class="position-relative tw-mb-4">
                                <input type="text" class="form-input" placeholder="Phone" required>
                            </div>
                        </div>

                        <h4 class="checkout-form-title">Additional information</h4>
                        <div class="checkout-form-additional-info-wrapper">
                            <textarea class="form-textarea form-input" name="message" id="message" rows="6"
                                placeholder="Notes about your order, e.g. special notes for delivery."></textarea>
                        </div>
                    </form>
                </div>
                <div class="col-lg-6">
                    <div class="order-summery-wrapper">
                        <h3 class="order-summery-title">Your Order</h3>
                        <div class="order-summery">
                            <ul class="order-summery-list">
                                <li class="order-summery-item heading">
                                    <span class="order-summery-item-name">Product</span>
                                <li class="order-summery-item">
                                    <span class="order-summery-item-name">Product Name</span>
                                    <span class="order-summery-item-price">$99.00</span>
                                </li>
                                <li class="order-summery-item">
                                    <span class="order-summery-item-name">Product Name</span>
                                    <span class="order-summery-item-price">$99.00</span>
                                </li>
                                <li class="order-summery-item">
                                    <span class="order-summery-item-name">Product Name</span>
                                    <span class="order-summery-item-price">$99.00</span>
                                </li>
                                <li class="order-summery-item heading">
                                    <span class="order-summery-item-price">Total</span>
                                    <span class="order-summery-item-price">$297.00</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="payment-method-wrapper">
                        <h3 class="payment-method-title">Payment Method</h3>
                        <div class="payment-method">
                            <ul class="payment-method-list">
                                <li class="payment-method-list-item">
                                    <input type="radio" name="payment-method" id="payment-method-1" checked>
                                    <label for="payment-method-1" class="payment-method-list-item-label">
                                        <span class="payment-method-list-item-label-text">Direct Bank Transfer</span>
                                    </label>
                                    <div class="payment-method-note">
                                        Make your payment directly into our bank account. Please use your Order ID as
                                        the payment reference. Your order won’t be shipped until the funds have
                                        cleared in our account.
                                    </div>
                                </li>

                                <li class="payment-method-list-item">
                                    <input type="radio" name="payment-method" id="payment-method-2">
                                    <label for="payment-method-2" class="payment-method-list-item-label">
                                        <span class="payment-method-list-item-label-text">Cash on Delivery</span>
                                    </label>
                                    <div class="payment-method-note">
                                        We accept cash on delivery. Please pay when you receive your order.
                                    </div>
                                </li>

                                <li class="payment-method-list-item">
                                    <input type="radio" name="payment-method" id="payment-method-3">
                                    <label for="payment-method-3" class="payment-method-list-item-label">
                                        <span class="payment-method-list-item-label-text">Paypal</span>
                                    </label>
                                    <div class="payment-method-note">
                                        Pay via PayPal; you can pay with your credit card if you don’t have a PayPal
                                        account.
                                    </div>
                                </li>
                            </ul>

                            <div class="payment-method-info">
                                <p class="payment-method-info-text">
                                    Your personal data will be used to support your experience throughout this website,
                                    to manage access to your account, and for other purposes described in our privacy
                                    policy.
                                </p>
                            </div>

                            <div class="payment-method-btn">
                                <button type="submit" class="btn">Place Order</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    @@include('../partials/_footer-two.html')
</div>


@@include('../partials/_template-bottom.html')
</body>

</html>